<template>
	<!-- 酒店认证 -->
	<view class="enterprise">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="酒店基础信息"></tab-top>
		<!-- #endif -->
		<!-- 酒店信息 -->
		<view class="set_box">
			<!-- 酒店名称 -->
			<view class="set_item">
				<view class="set_item_left">
					<text>酒店名称</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<input class="input" v-model="name" type="text" placeholder="请输入酒店真实名称" />
				</view>
			</view>
			<!-- 酒店地址 -->
			<view class="set_item" @tap="map1">
				<view class="set_item_left">
					<text>酒店地址</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<text class="address">{{city||"所在区"}}</text>
					<image src="/static/personal-center/right.png"></image>
				</view>
			</view>
			<!-- 详细地址 -->
			<view class="set_item" @tap="map2">
				<view class="set_item_left">
					<text>详细地址</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<text class="address">{{hotel_place_abbreviation_name||"详细地址"}}</text>
					<image src="/static/personal-center/right.png"></image>
				</view>
			</view>
			<!-- 酒店类别 -->
			<view class="set_item" @tap="hotelType">
				<view class="set_item_left">
					<text>酒店类别</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<text class="address">{{hotel_type_room}}</text>
					<image src="/static/personal-center/right.png"></image>
				</view>
			</view>
			<!-- 房间总数 -->
			<view class="set_item">
				<view class="set_item_left">
					<text>房间总数</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<input class="input" v-model="hostel_total" type="number" maxlength="6" placeholder="请输入酒店房间总数量" />
				</view>
			</view>
			<!-- 布草车数量 -->
			<view class="set_item">
				<view class="set_item_left">
					<text>布草车数量</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<uni-number-box :value="spread_grass_vehicle || 3" @change="changeTruck" />
				</view>
			</view>
		</view>
		<view class="bg_02"></view>

		<!-- 负责人信息 -->
		<view class="set_box">
			<!-- 联系人 -->
			<view class="set_item">
				<view class="set_item_left">
					<text>店方负责人</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<input class="input" type="text" v-model="contacts_one" placeholder="请输入联系人姓名" /></view>
			</view>
			<!-- 联系电话 -->
			<view class="set_item">
				<view class="set_item_left">
					<text>店方负责人电话</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<input class="input" type="number" v-model="contacts_one_phone" maxlength="11" placeholder="请输入手机号码" />
				</view>
			</view>
			<!-- 客服座机电话 -->
			<view class="set_item">
				<view class="set_item_left">
					<text>前台固话</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">
					<input class="input" v-model="juridical_person_phone" maxlength="12" type="number" placeholder="例如:0298888888" />
				</view>
			</view>
		</view>
		<view class="bg_02"></view>

		<!-- 酒店logo图片 -->
		<view class="logoImg set_box">
			<view class="set_item" style="border:none;">
				<view class="set_item_left">
					<text>酒店logo</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
			</view>

			<view class="logo" @tap="changeImg(true)">
				<image class="image1" v-if="hotel_logo" :src="hotel_logo + '?imageView2/1/w/400/h/400'"></image>
				<image class="image1_" v-if="!hotel_logo" src="/static/icon/add_.png"></image>
				<view class="Delimage1" v-if="hotel_logo" @tap.stop="Delimage1">×</view>
			</view>

			<view class="set_item" style="border:none;">
				<view class="set_item_left">
					<text>酒店图片</text>
					<text style="color: #f93735;margin-left: 8upx;">*</text>
				</view>
				<view class="set_item_reght">{{hotel_images.length}}/9</view>
			</view>

			<view class="image">
				<view class="item" v-for="(item,index) in hotel_images" :key="index">
					<image class="image3" :src="item + '?imageView2/1/w/400/h/400'"></image>
					<view class="Delimage2" @tap.stop="Delimage(index)">×</view>
				</view>
				<view class="image2" @tap="changeImg(0)" v-if="hotel_images.length < 9">
					<image src="/static/icon/add_.png"></image>
				</view>
			</view>
		</view>

		<button class="button" @tap="enterprise">保存</button>
		<view class="bg_04"></view>

		<jc-popUp position="bottom" ref="map" :flag="flag" markTapHide="true">
			<view class="map">
				<view class="title">
					<view class="box">
						<view class="item" v-if="showCity >= 1" :class="{ item1:showCity2 == 1, 'item2':(showCity == 1 && city1 == '请选择')}"
						 @tap="changTab(1)">{{city1}}</view>
						<view class="item" v-if="showCity >= 2" :class="{ item1:showCity2 == 2, 'item2':(showCity == 2 && city2 == '请选择')}"
						 @tap="changTab(2)">{{city2}}</view>
						<view class="item" v-if="showCity >= 3" :class="{ item1:showCity2 == 3, 'item2':(showCity == 3 && city3 == '请选择')}"
						 @tap="changTab(3)">{{city3}}</view>
						<view class="item" v-if="showCity >= 4" :class="{ item1:showCity2 == 4, 'item2':(showCity == 4 && city4 == '请选择')}"
						 @tap="changTab(4)">{{city4}}</view>
					</view>
					<image src="/static/icon/cha.png" @tap="clossCity" mode=""></image>
				</view>
				<scroll-view scroll-y="true" class="scroll">
					<view class="list" v-if="showCity2==1" :class='{blue:item1.blue == 1}' v-for="(item1,index1) in lists1" :key="index1"
					 @tap="changeCity(item1)">{{item1.PROVINCE_NAME}}</view>
					<view class="list" v-if="showCity2==2" :class='{blue:item2.blue == 1}' v-for="(item2,index2) in lists2" :key="index2"
					 @tap="changeCity(item2)">{{item2.CITY_NAME}}</view>
					<view class="list" v-if="showCity2==3" :class='{blue:item3.blue == 1}' v-for="(item3,index3) in lists3" :key="index3"
					 @tap="changeCity(item3)">{{item3.AREA_NAME}}</view>
					<view class="list" v-if="showCity2==4" :class='{blue:item4.blue == 1}' v-for="(item4,index4) in lists4" :key="index4"
					 @tap="changeCity(item4)">{{item4.STREET_NAME}}</view>
				</scroll-view>
			</view>
		</jc-popUp>

		<jc-popUp position="bottom" ref="pop" :flag="flag" markTapHide="true">
			<view class="footer">
				<view class="item">请选择您的酒店类型</view>
				<view class="item" v-for="(item,index) in hotel_type_Arry" @tap="total(item)" :key="index">{{item.name}}</view>
				<view class="item" @tap="total(0)">取消</view>
			</view>
		</jc-popUp>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/hotel/components/uni-number-box.vue'
	import qiniuUpload from '@/common/qiniuUpload.js';
	import jcPopUp from '@/components/jc-popUp/jc-popUp.vue';
	export default {
		data() {
			return {
				lists1: [],
				lists2: [],
				lists3: [],
				lists4: [],
				city: '',
				city1: '请选择',
				city2: '请选择',
				city3: '请选择',
				city4: '请选择',
				showCity: 1,
				showCity2: 1,
				hotel_id:0,
				province_code : 0,
				city_code : 0,
				area_code : 0,
				street_code :0,

				name: '',
				hostel_total: '',
				spread_grass_vehicle: 0,
				contacts_one: '',
				contacts_one_phone: '',
				juridical_person_phone: '',
				hotel_logo: '',
				hotel_images: [],
				hotel_address: '',
				hotel_place_abbreviation_name: '',
				hotel_latitude: '',
				hotel_longitude: '',
				hotel_type: '',
				hotel_type_room: '',
				hotel_type_Arry: []
			};
		},
		onLoad() {
			uni.showLoading({
				title: '加载中'
			});
			this.hotel_type_Arr()
			this.hotelInfoData()
			uni.hideLoading()
		},
		methods: {
			Delimage1() {
				this.hotel_logo = ''
			},
			hotelType() {
				/**
				 * 弹出层
				 */
				this.$refs.pop.show();
			},
			hotel_type_Arr() {
				this.getReq({
					url: 'hotel/hotelType',
					methed: 'get',
					not_paging_list: true
				}).then(v => {
					console.log(v[1])
					if (v[1].data.status == 1) {
						this.hotel_type_Arry = v[1].data.data.list
					}
				})
			},
			async enterprise() {
				/**
				 * 提交认证
				 */
				if (!this.formValidation()) { //表单验证
					return;
				}
				let dataD;
				if (this.hotel_id) { // 判断用户第几次提交
					dataD = {
						url :'user/hotel/' + this.hotel_id,
						method:'put',
						data: {
							name: this.name,
							hostel_total: this.hostel_total,
							spread_grass_vehicle: this.spread_grass_vehicle,
							contacts_one: this.contacts_one,
							contacts_one_phone: this.contacts_one_phone,
							juridical_person_phone: this.juridical_person_phone,
							hotel_logo: this.hotel_logo,
							hotel_images: this.hotel_images,
							hotel_address: this.hotel_address,
							hotel_place_abbreviation_name: this.hotel_place_abbreviation_name,
							hotel_latitude: this.hotel_latitude,
							hotel_longitude: this.hotel_longitude,
							hotel_type: this.hotel_type,
							province_code : this.province_code ,
							city_code : this.city_code ,
							area_code : this.area_code ,
							street_code :this.street_code 
						}
					}
				} else {
					dataD = {
						url :'user/hotel',
						method:'post',
						data: {
							uid:this.isLogin().id,
							name: this.name,
							hostel_total: this.hostel_total,
							spread_grass_vehicle: this.spread_grass_vehicle,
							contacts_one: this.contacts_one,
							contacts_one_phone: this.contacts_one_phone,
							juridical_person_phone: this.juridical_person_phone,
							hotel_logo: this.hotel_logo,
							hotel_images: this.hotel_images,
							hotel_address: this.hotel_address,
							hotel_place_abbreviation_name: this.hotel_place_abbreviation_name,
							hotel_latitude: this.hotel_latitude,
							hotel_longitude: this.hotel_longitude,
							hotel_type: this.hotel_type,
							province_code : this.province_code ,
							city_code : this.city_code ,
							area_code : this.area_code ,
							street_code :this.street_code 
						}
					}
				}
				let [_upload, upload] = await this.getReq(dataD)
				if (_upload || upload.data.status == 0) {
					this.showToast('提交失败，请重试');
					return;
				}
				if(upload.data.data.id){
					this.modifyUserInfo("hotel_id",upload.data.data.id)
				}else{
					this.modifyUserInfo("hotel_id",this.hotel_id)
				}
				uni.navigateTo({ //成功跳转
					url: '/pages/user/auditor'
				});
			},
			async changeImg(show) {
				/**
				 * 获取七牛云图片链接
				 */
				let [_chooseImage, chooseImage] = await uni.chooseImage({
					count: 1
				})
				if (_chooseImage) {
					return;
				}
				let images = chooseImage.tempFilePaths[0]
				let key = 'hotel:' + new Date().getTime() + '.png'; //图片名称
				let qiniuImg = await this.qiniuUpload(images, key);
				if (show) { // 图片为hotel_logo
					this.hotel_logo = qiniuImg.imageURL;
					return;
				}
				//图片为hotel_image 数组
				if (!this.hotel_images) {
					this.hotel_images = []
				}
				this.hotel_images.push(qiniuImg.imageURL)
			},
			async hotelInfoData() {
				/**
				 * 获取用户信息
				 */
				let [_hotel, hotel] = await this.hotel_info()
				if (_hotel || hotel.data.status == 0 || !hotel.data.data.hotel_info) {
					console.log('服务器错误或没有认证');
					return; //获取用户信息失败
				}
				this.hotel_id = hotel.data.data.hotel_info.id
				
				if (hotel.data.data.hotel_info.hotel_images) {
					hotel.data.data.hotel_info.hotel_images = JSON.parse(hotel.data.data.hotel_info.hotel_images)
				}
				
				this.city = hotel.data.data.hotel_info.hotel_address
				this.hotel_type_room = hotel.data.data.hotel_info.hotel_type.name
				for (let val in hotel.data.data.hotel_info) {
					for (let v in this._data) {
						if (val == v) this._data[v] = hotel.data.data.hotel_info[val]
					}
				}
				this.hotel_type = hotel.data.data.hotel_info.hotel_type.id
			},
			Delimage(e) {
				this.hotel_images.splice(e, 1)
			},
			async total(e) {
				/**
				 * 酒店类型
				 */
				if (!e) {
					//取消
					this.$refs.pop.hide();
					return;
				}
				this.hotel_type = e.id
				this.hotel_type_room = e.name
				this.$refs.pop.hide();
			},
			ViewImage(e) {
				/**
				 * 预览图片
				 */
				uni.previewImage({
					urls: this.hotel_images,
					current: e.currentTarget.dataset.url
				});
			},
			changeTruck(value) {
				/**
				 * 改变布草车数量
				 */
				this.spread_grass_vehicle = value
			},
			hotel_info() {
				/**
				 * 获取酒店信息
				 */
				return this.getReq({
					url: 'user/accountInfo',
					data: {
						id: this.isLogin().id
					}
				})
			},
			map2() {
				/**
				 * 选择地址
				 */
				uni.chooseLocation({
					success: (res) => {
						console.log(res);
						this.hotel_address = res.address;
						this.hotel_latitude = res.latitude;
						this.hotel_longitude = res.longitude;
						this.hotel_place_abbreviation_name = res.name;
					}
				})
			},
			map1() {
				/**
				 * 选择地址
				 */
				this.getReq({
					url: 'api/regional'
				}).then(data => {
					let [err, res] = data;
					this.lists1 = res.data.data
					this.showCity == 1;
					this.$refs.map.show();
				})
			},
			changTab(e) {
				/**
				 * 改变tab
				 */
				this.showCity2 = e;
			},
			clossCity() {
				/**
				 * 关闭选择
				 */
				this.$refs.map.hide();
			},
			changeCity(e) {
				/**
				 * 选择地址
				 */
				console.log(e)
				if (this.showCity2 == 1) {
					this.city1 = e.PROVINCE_NAME
					this.province_code  = e.PROVINCE_CODE
					this.lists1.forEach(val => {
						if (val == e) {
							val.blue = 1
						} else {
							val.blue = 0
						}
					})
					this.getReq({
						url: 'api/regional',
						data: {
							province_code: e.PROVINCE_CODE,
						}
					}).then(data => {
						let [err, res] = data
						if (res.data.data.length > 0) {
							this.showCity = this.showCity2 = 2
							this.city2 = this.city3 = this.city4 = '请选择'
							this.lists2 = res.data.data
						} else {
							this.city = this.city1
							this.city2 = this.city3 = this.city4 = ''
							this.$refs.map.hide();
						}
					})
				}
				if (this.showCity2 == 2) {
					this.city2 = e.CITY_NAME
					this.city_code  = e.CITY_CODE
					this.lists2.forEach(val => {
						if (val == e) {
							val.blue = 1
						} else {
							val.blue = 0
						}
					})
					this.getReq({
						url: 'api/regional',
						data: {
							city_code: e.CITY_CODE,
						}
					}).then(data => {
						let [err, res] = data
						if (res.data.data.length > 0) {
							this.showCity = this.showCity2 = 3
							this.city3 = this.city4 = '请选择'
							this.lists3 = res.data.data
						} else {
							this.city = this.city1 + this.city2
							this.city3 = this.city4 = ''
							this.$refs.map.hide();
						}
					})
				}
				if (this.showCity2 == 3) {
					this.city3 = e.AREA_NAME
					this.area_code  = e.AREA_CODE
					this.lists3.forEach(val => {
						if (val == e) {
							val.blue = 1
						} else {
							val.blue = 0
						}
					})
					this.getReq({
						url: 'api/regional',
						data: {
							area_code: e.AREA_CODE,
						}
					}).then(data => {
						let [err, res] = data
						if (res.data.data.length > 0) {
							this.showCity = this.showCity2 = 4
							this.city4 = '请选择'
							this.lists4 = res.data.data
						} else {
							this.city = this.city1 + this.city2 + this.city3
							this.city4 = ''
							this.$refs.map.hide();
						}
					})
				}
				if (this.showCity2 == 4) {
					this.city4 = e.STREET_NAME
					this.city = this.city1 + this.city2 + this.city3 + this.city4
					this.street_code = e.STREET_CODE
					this.lists4.forEach(val => {
						if (val == e) {
							val.blue = 1
						} else {
							val.blue = 0
						}
					})
					this.$refs.map.hide();
				}
			},
			formValidation() {
				/**
				 * 表单验证
				 */
				if (!this.name) {
					this.showToast("请填写酒店名称");
					return;
				}
				if (!this.hotel_place_abbreviation_name) {
					this.showToast("请选择详细地址");
					return;
				}
				if (!this.hostel_total) {
					this.showToast("请填房间总数");
					return;
				}
				if (!this.contacts_one) {
					this.showToast("请填写联系人");
					return;
				}
				if (!this.regularVerification('name', this.contacts_one)) {
					this.showToast("姓名格式有误");
					return;
				}
				if (!this.contacts_one_phone) {
					this.showToast("请填写联系电话");
					return;
				}
				if (!this.hotel_type_room) {
					this.showToast("请选择酒店类型");
					return;
				}
				if (!this.juridical_person_phone) {
					this.showToast("请填写座机电话");
					return;
				}
				if (!this.hotel_logo) {
					this.showToast("请上传logo");
					return;
				}
				if (this.hotel_images.length < 1) {
					this.showToast("请上传酒店图片");
					return;
				}
				if (!this.hotel_type_room) {
					this.showToast("请选择酒店类型");
					return;
				}
				if(!this.city){
					this.showToast("请选择酒店地址");
					return;
				}
				return true;
			}
		},
		components: {
			uniNumberBox,
			jcPopUp
		}
	};
</script>

<style lang="scss" scoped>
	.enterprise {
		color: #333333;

		.enterprise_herder {
			width: 442upx;
			height: 180upx;
			padding: 60upx 154upx 48upx 154upx;

			.enterprise_top {
				width: 442upx;
				height: 130upx;
				display: flex;
				align-items: center;

				.top_img {
					width: 180upx;
					height: 130upx;
					border-radius: 8upx;
				}

				.top_img_r {
					width: 67upx;
					height: 35upx;
					margin-right: 20upx;
				}
			}

			.enterprise_bommon {
				width: 442upx;
				height: 50upx;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				.bommon_img_l {
					width: 28upx;
					height: 28upx;
					margin-left: 76upx;
				}

				.bommon_img_r {
					width: 28upx;
					height: 28upx;
					margin-right: 76upx;
				}
			}
		}

		.set_box {
			width: 702upx;
			padding: 0 24upx;

			.set_item:nth-last-child(1) {
				border: none;
			}

			.set_item {
				width: 702upx;
				height: 98upx;
				border-bottom: 1upx solid #e5e5e5;
				line-height: 98upx;
				display: flex;
				justify-content: space-between;

				.set_item_left {
					font-size: 28upx;
				}

				.set_item_reght {
					font-size: 28upx;
					color: #999999;
					display: flex;
					align-items: center;

					.input[type] {
						margin-left: 40upx;
						font-size: 28upx;
						line-height: 98upx;
						text-align: right;
					}

					.address {
						margin-left: 40upx;
						font-size: 28upx;
						text-align: right;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						text-align: end;
						width: 450upx;
					}

					image {
						width: 12upx;
						height: 22upx;
						margin-left: 12upx;
					}
				}
			}
		}

		.logoImg {
			.logo {
				position: relative;
				width: 180upx;
				height: 180upx;
				border: 2upx solid #e5e5e5;

				.image1 {
					width: 168upx;
					height: 168upx;
					padding: 6upx;
				}

				.image1_ {
					width: 80upx;
					height: 80upx;
					position: absolute;
					left: 50upx;
					top: 50upx;
				}

				.Delimage1 {
					position: absolute;
					left: 158upx;
					top: -15upx;
					width: 40upx;
					height: 40upx;
					font-size: 33upx;
					text-align: center;
					line-height: 40upx;
					border-radius: 50%;
					color: #fff;
					background-color: rgba(0, 0, 0, 0.5);
				}
			}

			.image {
				display: flex;
				flex-wrap: wrap;

				.item {
					position: relative;
					width: 180upx;
					height: 180upx;
					margin: 0 50upx 30upx 0;

					.image3 {
						width: 180upx;
						height: 180upx;
					}

					.Delimage2 {
						position: absolute;
						right: -25upx;
						top: -20upx;
						width: 40upx;
						height: 40upx;
						font-size: 33upx;
						text-align: center;
						line-height: 40upx;
						border-radius: 50%;
						color: #fff;
						background-color: rgba(0, 0, 0, 0.5);
					}
				}

				.image2 {
					width: 180upx;
					height: 180upx;
					margin: 0 50upx 30upx 0;
					border: 2upx solid #e5e5e5;
					position: relative;

					image {
						width: 80upx;
						height: 80upx;
						position: absolute;
						left: 50upx;
						top: 50upx;
					}
				}
			}
		}

		.button {
			width: 540upx;
			height: 90upx;
			background-color: #3595f9;
			border-radius: 8upx;
			font-size: 32upx;
			color: #ffffff;
			margin-top: 98upx;
		}

		.bg_01 {
			width: 750upx;
			height: 60upx;
		}

		.bg_02 {
			width: 750upx;
			height: 10upx;
			background-color: #f0f0f0;
		}

		.bg_03 {
			width: 750upx;
			height: 62upx;
		}

		.bg_04 {
			width: 750upx;
			height: 46upx;
		}

		.map {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750upx;
			font-size: 28upx;
			background-color: #ffffff;

			.title {
				padding: 0 24rpx;
				height: 100upx;
				box-sizing: content-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #e5e5e5;

				.box {
					display: flex;
					align-items: center;

					.item {
						line-height: 96rpx;
						margin-right: 46rpx;
						max-width: 3em;
						overflow: hidden;
						white-space: nowrap;
					}

					.item::after {
						display: block;
						content: '';
						width: 82rpx;
						height: 4rpx;
						border-radius: 2rpx;
						margin: 0 auto;
					}

					.item2 {
						color: #3595f9;
					}

					.item1::after {
						display: block;
						content: '';
						width: 82rpx;
						height: 4rpx;
						background-color: #3595f9;
						border-radius: 2rpx;
						margin: 0 auto;
					}
				}

				image {
					width: 26rpx;
					height: 26rpx;
				}
			}

			.scroll {
				padding: 0 24rpx;
				height: 800rpx;

				.blue {
					color: #3595f9;
				}

				.list {
					height: 100rpx;
					line-height: 100rpx;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750upx;
			background-color: #ffffff;

			.item:nth-child(1) {
				font-size: 24upx;
				color: #999999;
				border-bottom: 1upx solid #e5e5e5;
			}

			.item:nth-last-child(2) {
				border-bottom: 19upx solid #e5e5e5;
			}

			.item {
				height: 100upx;
				line-height: 100upx;
				font-size: 28upx;
				text-align: center;
				box-sizing: content-box;
			}
		}
	}
</style>
